<template>
  <view>
    <view :class="{'status':state.isH5Plus}" class="header">
      <view class="userinfo">
        <view class="face" @click="toLogin"><image :src="state.userinfo.face"></image></view>
        <view class="info">
          <view class="username">{{state.userinfo.username}}</view>
          <view class="integral">积分:{{state.userinfo.integral}}</view>
        </view>
      </view>
      <view class="setting"><image src="../../static/center/setting.png"></image></view>
    </view>
    <view class="orders">
      <view class="box">
        <view v-for="(row,index) in state.orderTypeLise" :key="row.name" class="label" hover-class="hover"  @tap="toOrderType(index)">
          <view class="icon"><view v-if="row.badge>0" class="badge">{{row.badge}}</view><image :src="'../../static/center/'+row.icon"></image></view>
          {{row.name}}
        </view>
      </view>
    </view>
    <view v-for="(list,list_i) in state.severList" :key="list_i" class="list">
      <view v-for="(li,li_i) in list" :key="li.name" class="li" hover-class="hover"  v-bind:class="{'noborder':li_i==list.length-1}" @tap="toPage(list_i,li_i)" >
        <view class="icon"><image :src="'../../static/center/'+li.icon"></image></view>
        <view class="text">{{li.name}}</view>
        <image class="to" src="../../static/center/ok_icon.png"></image>
      </view>
    </view>
  </view>
</template>
<script setup>
import {reactive} from 'vue'
import {useStore} from "@/pinia/user";
import {onShow} from '@dcloudio/uni-app';

const store = useStore()
console.log(store.getUserInfo)

const toLogin = () => {
  store.clearUserInfo()
  uni.navigateTo({url:'/pages/login/index'})
}

onShow(()=>{
  state.userinfo={
    face:store.getUserInfo['avatar'],
    username:store.getUserInfo['intro'],
    integral:store.getUserInfo['id']
  }

})

const state = reactive({
  isH5Plus:true,
  userinfo:{
    face:store.getUserInfo['avatar'],
    username:store.getUserInfo['intro'],
    integral:store.getUserInfo['id']
  },
  orderTypeLise:[
    //name-标题 icon-图标 badge-角标
    {name:'待付款',icon:'contro_icon.png',badge:1},
    {name:'待发货',icon:'king_icon.png',badge:2},
    {name:'待收货',icon:'nb_icon.png',badge:6},
    {name:'待评价',icon:'note_icon.png',badge:9},
    {name:'退换货',icon:'ok_icon.png',badge:0}
  ],
  severList:[
    [
      {name:'我的收藏',icon:'like.png'},
      {name:'优惠券',icon:'money.png'},
      {name:'红包',icon:'tag_icon.png'},
      {name:'任务',icon:'start.png'},
    ],
    [
      {name:'积分明细',icon:'hot.png'},
      {name:'抽奖',icon:'edit.png'},
      {name:'收货地址',icon:'shoucang.png'},
      {name:'银行卡',icon:'notice.png'},
      {name:'安全中心',icon:'like.png'},
      {name:'在线客服',icon:'ok_icon.png'}
    ]
  ],
})


const toOrderType = (index) => {
  uni.showToast({title: state.orderTypeLise[index].name});

}
const toPage = (list_i,li_i) => {
  uni.showToast({title: state.severList[list_i][li_i].name});


}

</script>

<style lang="scss">
#page {background-color:#fff}
.header{
  &.status{padding-top:var(--status-bar-height);}
  background-color:#ff6364;width:92%;height:30vw;padding:0 4%;display:flex;align-items:center;
  .userinfo{
    width:90%;display:flex;
    .face{flex-shrink:0;width:15vw;height:15vw;
      image{width:100%;height:100%;border-radius:100%}
    }
    .info{
      display:flex;flex-flow:wrap;padding-left:30upx;
      .username{width:100%;color:#fff;font-size:40upx}
      .integral{display:flex;align-items:center;padding:0 20upx;height:40upx;color:#fff;background-color:rgba(0,0,0,0.1);border-radius:20upx;font-size:24upx}
    }
  }
  .setting{
    flex-shrink:0;width:6vw;height:6vw;
    image{width:100%;height:100%}
  }
}
.hover{background-color:#eee}
.orders{
  background-color:#ff6364;width:92%;height:11vw;padding:0 4%;margin-bottom:calc(11vw + 40upx);display:flex;align-items:flex-start;border-radius:0 0 100% 100%;margin-top: -1upx;
  .box{
    width:98%;padding:0 1%;height:22vw;background-color:#fefefe;border-radius:24upx;box-shadow:0 0 20upx rgba(0,0,0,0.15);margin-bottom:40upx;display:flex;align-items:center;justify-content:center;
    .label{
      display:flex;align-items:center;justify-content:center;flex-flow:wrap;width:100%;height:16vw;color:#666666;font-size:26upx;
      .icon{
        position:relative;width:7vw;height:7vw;margin:0 1vw;
        .badge{position:absolute;width:4vw;height:4vw;background-color:#ec6d2c;top:-1vw;right:-1vw;border-radius:100%;font-size:20upx;color:#fff;display:flex;align-items:center;justify-content:center;z-index: 10;}
        image{width:7vw;height:7vw;z-index: 9;}
      }
    }
  }
}
.list{
  width:100%;border-bottom:solid 26upx #f1f1f1;
  .li{
    width:92%;height:100upx;padding:0 4%;border-bottom:solid 1upx #e7e7e7;display:flex;align-items:center;
    &.noborder{border-bottom:0}
    .icon{
      flex-shrink:0;width:50upx;height:50upx;
      image{width:50upx;height:50upx}
    }
    .text{padding-left:20upx;width:100%;color:#666}
    .to{flex-shrink:0;width:40upx;height:40upx}
  }
}
</style>
